<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}} - 帖子详情</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .post-content {
            white-space: pre-wrap;
            background-color: #f8f9fa;
            padding: 1rem;
            border-radius: 0.25rem;
        }
        .comment {
            border-left: 3px solid #0d6efd;
            margin-bottom: 1rem;
            padding-left: 1rem;
        }
        .comment-meta {
            color: #6c757d;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">在线评测系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="/all_questions">题目列表</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/user/submissions">我的提交</a>
                    </li>
                </ul>
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item" id="logoutItem" style="display: none; z-index: 1000;">
                        <a class="nav-link" id="logoutLink" href="/logout">退出</a>
                    </li>
                    <li class="nav-item" id="loginItem" style="z-index: 1000;">
                        <a class="nav-link" id="loginLink" href="/login">登录</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/all_questions">题目列表</a></li>
                <li class="breadcrumb-item"><a href="/forum/{{question_number}}">第{{question_number}}题讨论区</a></li>
                <li class="breadcrumb-item active" aria-current="page">帖子详情</li>
            </ol>
        </nav>

        <div class="card mb-4">
            <div class="card-body">
                <h2 class="card-title">{{title}}</h2>
                <p class="text-muted">
                    作者：{{user_id}} | 发布时间：{{create_time}} | 更新时间：{{update_time}}
                </p>
                <div class="post-content">{{content}}</div>
            </div>
        </div>

        <h3 class="mb-3">评论</h3>
        <div class="comments-section">
            {{#comments}}
            <div class="comment">
                <p class="comment-meta">
                    {{user_id}} | {{create_time}}
                </p>
                <p class="comment-content">{{content}}</p>
            </div>
            {{/comments}}
        </div>

        <div class="card mt-4">
            <div class="card-body">
                <h5 class="card-title">发表评论</h5>
                <form id="newCommentForm">
                    <input type="hidden" name="post_id" value="{{id}}">
                    <div class="mb-3">
                        <textarea class="form-control" id="content" name="content" rows="3" required></textarea>
                    </div>
                    <button type="button" class="btn btn-primary" onclick="submitComment()">发表评论</button>
                </form>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    
    <script>
        function submitComment() {
            const form = document.getElementById('newCommentForm');
            const formData = new FormData(form);
            const data = {
                post_id: parseInt(formData.get('post_id')),
                content: formData.get('content')
            };

            fetch('/comment', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
                .then(response => {
                    if (response.ok) {
                        alert('评论成功！');
                        location.reload();
                    } else {
                        response.text().then(text => {
                            alert(text || '评论失败，请重试');
                        });
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('评论失败，请重试');
                });
        }

        function checkLogin() {
            const loginItem = document.getElementById('loginItem');
            const logoutItem = document.getElementById('logoutItem');
            
            if (!loginItem || !logoutItem) {
                return;
            }
            
            const cookies = document.cookie.split(';');
            let isLoggedIn = false;
            
            for (let cookie of cookies) {
                cookie = cookie.trim();
                if (cookie.startsWith('user_id=')) {
                    const value = cookie.substring(8);
                    if (value && value !== "undefined" && value !== "null" && value !== "") {
                        isLoggedIn = true;
                        break;
                    }
                }
            }
            
            if (isLoggedIn) {
                loginItem.style.display = 'none';
                logoutItem.style.display = 'block';
            } else {
                loginItem.style.display = 'block';
                logoutItem.style.display = 'none';
            }
        }

        document.addEventListener('DOMContentLoaded', checkLogin);
        setInterval(checkLogin, 5000);
    </script>
</body>
</html> 